<template>
  <div class="review-list">
    <div class="header">
      <h2>审核管理</h2>
    </div>

    <div class="filter">
      <el-form :model="filterForm" inline>
        <el-form-item label="审核类型">
          <el-select v-model="filterForm.review_type" placeholder="请选择" clearable>
            <el-option label="联系人编辑" :value="2" />
            <el-option label="联系人删除" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="filterForm.status" placeholder="请选择" clearable>
            <el-option label="待审核" :value="1" />
            <el-option label="审核通过" :value="2" />
            <el-option label="审核驳回" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="tableData" v-loading="loading">
      <el-table-column prop="contact_name" label="联系人" width="100" />
      <el-table-column prop="customer_name" label="客户名称" min-width="150" />
      <el-table-column prop="review_type" label="审核类型" width="100">
        <template #default="{ row }">
          {{ getTypeLabel(row.review_type) }}
        </template>
      </el-table-column>
      <el-table-column prop="user_name" label="申请人" width="100" />
      <el-table-column prop="status" label="审核状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusTagType(row.status)">
            {{ getStatusLabel(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="reviewer_name" label="审核人" width="100" />
      <el-table-column prop="review_time" label="审核时间" width="140" />
      <el-table-column
        prop="review_comment"
        label="审核意见"
        min-width="200"
        show-overflow-tooltip
      />
      <el-table-column prop="create_time" label="申请时间" width="140" />
      <el-table-column label="操作" width="120" fixed="right">
        <template #default="{ row }">
          <el-button type="text" @click="handleDetail(row)" v-if="row.status === 1">审核</el-button>
          <el-button type="text" @click="handleView(row)" v-if="row.status !== 1">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 审核对话框 -->
    <ContactReview
      v-model="reviewVisible"
      :review-id="currentReviewId"
      @success="handleReviewSuccess"
    />

    <!-- 查看详情对话框 -->
    <ReviewDetail v-model="detailVisible" :review-id="currentReviewId" />
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'
  import ContactReview from './components/ContactReview.vue'
  import ReviewDetail from './components/ReviewDetail.vue'
  import { reviewApi } from '@/api/crm'
  import type { Review, Option } from '@/types/crm'

  const loading = ref(false)
  const tableData = ref<Review[]>([])
  const reviewVisible = ref(false)
  const detailVisible = ref(false)
  const currentReviewId = ref(0)

  const filterForm = reactive({
    review_type: '',
    status: 1 as number, // 默认显示待审核
  })

  const pagination = reactive({
    current: 1,
    size: 20,
    total: 0,
  })

  const typeOptions = ref<Option[]>([])
  const statusOptions = ref<Option[]>([])

  // 获取审核列表
  const getReviewList = async () => {
    loading.value = true
    try {
      const params = {
        page: pagination.current,
        limit: pagination.size,
        ...filterForm,
      }
      const res = await reviewApi.contactList(params)
      tableData.value = res.data.list
      pagination.total = res.data.total
    } catch (error) {
      console.error('获取审核列表失败:', error)
    } finally {
      loading.value = false
    }
  }

  // 获取选项数据
  const getOptions = async () => {
    try {
      const [typeRes, statusRes] = await Promise.all([
        reviewApi.getReviewTypeOptions(),
        reviewApi.getReviewStatusOptions(),
      ])
      typeOptions.value = typeRes.data
      statusOptions.value = statusRes.data
    } catch (error) {
      console.error('获取选项失败:', error)
    }
  }

  // 获取类型标签
  const getTypeLabel = (value: number) => {
    const option = typeOptions.value.find(item => item.value === value)
    return option ? option.label : '-'
  }

  // 获取状态标签
  const getStatusLabel = (value: number) => {
    const option = statusOptions.value.find(item => item.value === value)
    return option ? option.label : '-'
  }

  // 获取状态标签类型
  const getStatusTagType = (value: number) => {
    const types = ['', 'warning', 'success', 'danger']
    return types[value] || 'info'
  }

  // 搜索
  const handleSearch = () => {
    pagination.current = 1
    getReviewList()
  }

  // 重置
  const handleReset = () => {
    filterForm.review_type = ''
    filterForm.status = 1
    pagination.current = 1
    getReviewList()
  }

  // 分页大小改变
  const handleSizeChange = (size: number) => {
    pagination.size = size
    pagination.current = 1
    getReviewList()
  }

  // 当前页改变
  const handleCurrentChange = (current: number) => {
    pagination.current = current
    getReviewList()
  }

  // 审核
  const handleDetail = (row: any) => {
    currentReviewId.value = row.id
    reviewVisible.value = true
  }

  // 查看详情
  const handleView = (row: any) => {
    currentReviewId.value = row.id
    detailVisible.value = true
  }

  // 审核成功
  const handleReviewSuccess = () => {
    reviewVisible.value = false
    getReviewList()
  }

  onMounted(() => {
    getReviewList()
    getOptions()
  })
</script>

<style scoped>
  .review-list {
    padding: 20px;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .filter {
    background: #f5f7fa;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
  }

  .pagination {
    margin-top: 20px;
    text-align: right;
  }
</style>
